@import '../../../_theme.css';

:host {
  --_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);
  --_as-gutter-icon-horizontal: var(
    --as-gutter-icon-horizontal,
    url('')
  );
  --_as-gutter-icon-vertical: var(
    --as-gutter-icon-vertical,
    url('')
  );
  --_as-gutter-icon-disabled: var(
    --as-gutter-icon-disabled,
    url('')
  );
  --_as-transition-duration: var(--as-transition-duration, 0.3s);
  --_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);
}

:host {
  display: grid;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

:host(.as-transition) {
  transition: grid-template var(--_as-transition-duration);
}

.as-split-gutter {
  background-color: var(--_as-gutter-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;

  :host(.as-horizontal) > & {
    cursor: col-resize;
    height: 100%;
  }

  :host(.as-vertical) > & {
    cursor: row-resize;
    width: 100%;
  }

  :host(.as-disabled) > & {
    cursor: var(--_as-gutter-disabled-cursor);
  }
}

.as-split-gutter-icon {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;

  :host(.as-horizontal) > .as-split-gutter > & {
    background-image: var(--_as-gutter-icon-horizontal);
  }

  :host(.as-vertical) > .as-split-gutter > & {
    background-image: var(--_as-gutter-icon-vertical);
  }

  :host(.as-disabled) > .as-split-gutter > & {
    background-image: var(--_as-gutter-icon-disabled);
  }
}
